<template>
  <view class="customNav" :style="{height:navBarStyle.height,background:background}">
      <view class="nav">
        <image class="left" src="/static/arrow.png" @click="goBack" v-if="isBack"></image>
        <span class="nav-title" v-if="title">{{ title }}</span>
        <slot></slot>
      </view>
  </view>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      default:''
    },
    background:{
      type:String,
      default:'#fff'
    },
    isBack:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      navBarStyle:{
        height: "44px",
      }
    }
  },
  methods: {
    goBack(){
      uni.navigateBack({
         delta: 1
      });
    }
  },
  created() {
   // 获取系统信息，判断当前平台
    uni.getSystemInfo({
        success: (res) => {
          const statusBarHeight = res.statusBarHeight || 0;
          // 计算导航栏高度
          const navBarHeight = statusBarHeight + 44;
          // 设置导航栏样式
          this.navBarStyle = {
            height: `${navBarHeight}px`,
            paddingTop: `${statusBarHeight}rpx`
            // 其他样式属性
          };
        }
      });
  },
}
</script>
<style lang="scss" scoped>
  .customNav{
    height: 88rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: flex-end;
    position:sticky;
    top: 0;
    left: 0;
    z-index: 111;
    
    .nav{
      margin-bottom: 18rpx;
      display: flex;
      align-items: center;
      .left{
        width:48rpx;
        height:48rpx;
        margin-right: 10rpx;
      }
      .nav-title{
        font-size: 36rpx;
      }
    }
  }
</style>